<template>
    <ul class="c-tabs">
        <li :class="{
                'c-tabs-item': true,
                'is-active': item.active == active
            }"
            v-for="(item, key) in items"
            :key="key"
            @click="handleClick(item)">
            {{item.label}}
            <span
                style="font-size: 14px;"
                v-show="item.close"
                @click.stop="handleClose(key, item)">&times;</span>
        </li>
    </ul>
</template>

<script>
/**
 * 路由tabs组件
 * api:
 *  items: [{active, label, close}]
 *  active: 激活的tab名 items的active
 */
export default {
  name: 'c-tabs',
  props: {
    active: [String, Number],
    items: Array
  },
  methods: {
    handleClick (item) {
      this.$emit('click', item)
    },
    handleClose (index, item) {
      const newTabs = this.items.filter((tab, key) => index !== key)
      this.$emit('change', newTabs, index, item)
    }
  }
}
</script>

<style lang="less">
.c-tabs {
    display: flex;
    list-style: none;
    margin: 0;
    padding-left: 20px;

    &-item {
        height: 31px;
        margin-right: 10px;
        padding: 5px 16px 4px;
        color: rgb(73, 80, 96);
        background-color: #e5e5e5;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        cursor: pointer;

        &:hover {
            color: #05bac5;
        }

        &.is-active {
            color: #05bac5;
            background-color: #fff;
        }
    }
}
</style>